<template>
  <header>
    <div class="top">
      <div class="box">
        <div class="welcome">{{info.pagetitle}}</div>
        <!-- <div class="guanzhu">
            <i></i>
            <ul class="weixin">
              <li>
                <img
                  src="static/picture/wx.png"
                  alt="微信客服：476847113"
                />微信客服
              </li>
              <li>
                <img
                  src="static/picture/wxgzh.jpg"
                  alt="微信公众号"
                />微信公众号
              </li>
            </ul>
          </div> -->
        <!--guanzhu end-->
        <div class="is-search">
          <section @click="show_search = true"><i></i></section>
        </div>
        <div class="search-page" v-show="show_search" style="display: block">
          <div class="search_box">
            <div class="go-left" @click="show_search = false"></div>
            <div class="search">
              <form id="searchform">
                <input
                  name="keywords"
                  v-model.trim="keywords"
                  class="input_text"
                  placeholder="请输入关键字词"
                  type="text"
                />
                <input
                  class="input_submit"
                  value="搜索"
                  type="button"
                  @click="search(keywords)"
                />
              </form>
            </div>
            <div class="clear"></div>
            <div class="hot-search">
              <p>热门搜索/Hot Search</p>
              <ul class="search-paihang">
                <li v-for="(h, i) in hots" :key="i">
                  <a @click="search(h)">
                    {{ h }}
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!--search-page end-->
      </div>
    </div>
    <!--top end-->
    <nav>
      <div class="box">
        <div class="logo">
          <img src="/logo.png" alt="logo" />
        </div>
        <ul
          class="starlist"
          :class="{ 'm-nav-show': m_show }"
          style="padding-left: 0"
        >
          <!-- <v-skeleton-loader
            v-show="classes_loading"
            class="mx-auto"
            max-width="60%"
            type="table-row"
          ></v-skeleton-loader> -->
          <li
            :class="{ menu: hasChildren(c), selected: cur_url==encodeURI(c.link) }"
            v-for="(c, i) in classes"
            :key="i"
            v-show="c.fid <= 0"
          >
            <nuxt-link :to="c.link">{{ c.title }}</nuxt-link>
            <ul class="sub" style="padding-left: 0">
              <li
                v-for="(cc, ii) in classes"
                :key="ii"
                v-show="cc.fid == c.id"
                :class="{ selected: cur_url==encodeURI(cc.link) }"
              >
                <nuxt-link :to="cc.link">{{ cc.title }}</nuxt-link>
              </li>
            </ul>
            <span></span>
          </li>
          <br style="clear: both" />
        </ul>
        <v-progress-linear
          v-show="classes_loading"
          indeterminate
          color="green"
        ></v-progress-linear>
      </div>
    </nav>
    <h2 id="mnavh" :class="{ open: m_show }" @click="m_show = !m_show">
      <span class="navicon"></span>
    </h2>
  </header>
</template>
<script>
import Cache from "../utils/cache";
import axios from '../utils/axios'
export default {
  props:[],
  data() {
    return {
      classes: [],
      classes_loading: true,
      classes_err: "",
      show_search: false,
      m_show: false,
      keywords: "",
      hots: [],
      info:{},
    };
  },
  computed: {
    cur_path() {
      return this.$route.path;
    },
    cur_url() {
      return this.$route.fullPath;
    },
  },
  watch: {
    cur_url(v) {
      this.show_search = false;
    },
  },
  mounted() {
    this.load_site()
    this.loadClasses();
  },
  methods: {
    encodeURI(){
      return encodeURI
    },
    //加载导航
    loadClasses() {
      const nav_data = Cache.get("nav_data");
      
      if (nav_data) {
        this.classes_loading = false;
        this.classes = nav_data.classes;
        this.hots = nav_data.keywords;
        return;
      }

      axios
        .get("classes")
        .then((res) => {
          if (res.code != 200){
            this.classes_loading = false
            this.classes_err = "System Error"
            return
          }
          this.classes_loading = false;
          this.classes = res.data.classes;
          this.hots = res.data.keywords;
          Cache.set("nav_data", res.data, 300);
        })
        .catch((err) => {
          console.log(err)
          this.classes_loading = false
          this.classes_err = "System Error"
        });
    },
    //加载站点
    load_site() {
      const web_info = Cache.get('web_info')
      if(web_info){
        this.info = web_info
        return
      }
      axios
        .get("site")
        .then((res) => {
          if (res.code != 200){
            return
          }
          this.info = res.data.info;
          Cache.set("web_info", res.data.info, 300);
        })
    },
    hasChildren(c) {
      for (const key in this.classes) {
        if (this.classes[key].fid == c.id) {
          return true;
        }
      }
      return false;
    },
    encodeURI(str) {
      return encodeURI(str);
    },
    goPage(path) {
      if (this.$route.path == path || !path) {
        return;
      }
      this.$router.push(path);
    },
    search(keywords) {
      this.show_search = false;
      this.keywords = keywords;
      let url = "/share?keywords=" + encodeURI(keywords);
      if (this.$route.fullPath == url) {
        return;
      }

      this.$router.replace(url);
    },
  },
};
</script>
<style scoped>
.m-nav-show {
  display: block;
  transform: translateX(0);
}

.starlist {
  transition: transform 0.8s;
}
.input_text {
  background-color: #fff;
}
.search-page {
  z-index: 100;
}
</style>>
